import React, {FC, useCallback, useMemo, useRef, useState} from "react";
import "./css/GlobalModal.less";
import {Modal} from "antd";
import {coreConnect} from "../utils/StoreUtil.tsx";
import useStateRef from "../customUse/useStateRef.tsx";

interface GlobalModalProps {
    list: object[]
}


const GlobalModal: FC<GlobalModalProps> = (props) => {
    const boundMapRef = useRef({});

    const [boundMap, setBoundMap] = useStateRef({}, boundMapRef);

    const onRemoveModal: Function = useCallback((key: string) => {
        props.dispatch({
            type: "modalReducer/removeModal",
            payload: {
                key: key
            }
        })
    }, []);

    const onCloseModal: Function = useCallback((key: string) => {
        props.dispatch({
            type: "modalReducer/closeModal",
            payload: {
                key: key
            }
        })
    }, []);
    const handleStart: Function = useCallback((dom: any, key: string) => {
        const targetRect = dom.node.getBoundingClientRect();
        let newBoundMap: any = boundMapRef.current || {};
        newBoundMap[key] = {
            left: -targetRect.left + dom.x,
            top: -targetRect.top + dom.y,
        }
        setBoundMap(newBoundMap);
    }, []);


    const renderGlobalModal = useMemo(() => {
        return (
            <div className="sf_core_modal">
                {props.list?.map((item: any = {}) => {
                    let Com: any = item.component,
                        {modalProps = {}}: { modalProps: any } = item,
                        {isDestroy = true}: { isDestroy: boolean } = modalProps;

                    if (!Com) null;

                    if (item.footer !== undefined) {
                        modalProps.footer = item.footer;
                    }

                    let otherClass: string = "";

                    if (!modalProps.title) {
                        otherClass = " sf_core_modal_un_title"
                    }

                    if (modalProps.footer === null) {
                        otherClass = " sf_core_modal_un_footer"
                    }

                    if (!modalProps.title && modalProps.footer === null) {
                        otherClass = " sf_core_modal_un_title_and_footer"
                    }

                    let bound: any = boundMap[item.key] || {left: 0, top: 0}

                    return (
                        <Modal
                            afterClose={async () => {
                                let res = await item.resultData;
                                item?.onFinish && item.onFinish(res);
                                isDestroy ? onRemoveModal(item.key) : onCloseModal(item.key);
                            }}
                            placement={modalProps.placement || "bottom"}
                            height={modalProps.height}
                            open={item.open}
                            maskClosable={false}
                            key={item.key}
                            onCancel={() => {
                                // item?.onFinish && item.onFinish({});
                                onRemoveModal(item.key);
                            }}
                            onOk={() => {
                                item.onOk && item.onOk();
                            }}
                            getContainer={item.container || ".sf_core_main_layout_content"}
                            destroyOnClose={isDestroy}
                            className={"sf_core_modal_main sf_core_modal" + (item.key ? "_" + item.key : "default") + otherClass + " " + modalProps.className}
                            {...modalProps}
                            modalRender={(modal) => {
                                return (<div style={{width: "100%", height: "100%"}}>{modal}</div>);
                            }}
                        >
                            <Com {...item.comProps} modalKey={item.key}/>
                        </Modal>
                    )
                })}
            </div>
        )
    }, [props.list, boundMap]);
    return (renderGlobalModal);
};

export default coreConnect("modalReducer")(GlobalModal);